<template>
	<view class="content">
		<view class="topImg">
			<view class="topImg-nik1"></view>
			<view class="topImg-nik">
				<image :src="userData.avatar ? userData.avatar : ''" @click="chooseImage" mode="widthFix"></image>
			</view>
		</view>
		<view class="table">
			<view class="table-nik">
				<view class="table-nik-item">
					<view>宠物名字</view>
					<input style="text-align: right;color: #313131;" type="text" placeholder="请填写名字" v-model="userData.enterpriseName" />
				</view>
				<view class="table-nik-item" v-if="options.pid">
					<view>pid</view>
					<input style="text-align: right;color: #313131;" disabled type="text" placeholder="请填写名字" v-model="userData.pid" />
				</view>
				<view class="table-nik-item">
					<view>宠物品种</view>
					<view @click="setUrl"><u-icon name="arrow-right" style="margin-top: 5rpx;" color="#BFBFBF" size="24"></u-icon><span :style="userData.cascade != '请选择品种'?'margin-right: 20rpx;color: #313131':'margin-right: 20rpx;'">{{userData.cascade}}</span></view>
				</view>
				<view class="table-nik-item">
					<view>宠物性别</view>
					<view @click="gender = true"><u-icon name="arrow-right" style="margin-top: 5rpx;" color="#BFBFBF" size="24"></u-icon><span :style="userData.genders != '请选择性别'?'margin-right: 20rpx;color: #313131':'margin-right: 20rpx;'">{{userData.genders}}</span></view>
				</view>
				<view class="table-nik-item">
					<view>出生日期</view>
					<view @click="time = true"><u-icon name="arrow-right" style="margin-top: 5rpx;" color="#BFBFBF" size="24"></u-icon><span :style="userData.times != '请选择生日'?'margin-right: 20rpx;color: #313131':'margin-right: 20rpx;'">{{userData.times}}</span></view>
				</view>
				<view class="table-nik-item2" v-if="options.pid">
					<view>宠物铭牌</view>
					<!-- <input style="text-align: right;color: #313131;" type="text" placeholder="请填写名字" v-model="userData.sign" /> -->
					<textarea v-model="userData.sign" placeholder="出彩的签名可以吸引宠粉哦～"></textarea>
				</view>
			</view>
		</view>
		
		<view class="button">
			<u-button type="primary" class="styleCss" hover-class="none" shape="circle" @click="setData">{{options.pid?'确认修改':'确认提交'}}</u-button>
		</view>
		<u-select v-model="gender" :list="list" @confirm="confirm"></u-select>
		<u-calendar v-model="time" mode="date" @change="getTime"></u-calendar>
	</view>
</template>

<script>
export default {
	data() {
		return {
			gender: false,
			genders: '请选择性别',
			time: false,
			list: [
				{
					label: '公'
				},
				{
					label: '母'
				}
			],
			times: '请选择生日',
			cascade: '请选择品种',
			userData:{
				pid: undefined,
				avatar:'',
				enterpriseName: '',
				times:'请选择生日',
				cascade:'请选择品种',
				genders:'请选择性别',
				sign: undefined,
				cascadeId:0,
			},
			options: {
				pid:undefined
			}
		}
	},
	methods:{
		setData(){
			if(!this.userData.avatar){
				uni.showToast({
					title: '头像不能为空',
					duration:1500,
					icon:'none'
				})
				return false
			}
			if(!this.userData.enterpriseName){
				uni.showToast({
					title: '宠物名称不能为空',
					duration:1500,
					icon:'none'
				})
				return false
			}
			if(!this.userData.cascade){
				uni.showToast({
					title: '请选择品种',
					duration:1500,
					icon:'none'
				})
				return false
			}
			if(this.userData.genders == '请选择性别'){
				uni.showToast({
					title: '请选择性别',
					duration:1500,
					icon:'none'
				})
				return false
			}
			if(this.userData.times == '请选择生日'){
				uni.showToast({
					title: '请选择生日',
					duration:1500,
					icon:'none'
				})
				return false
			}
			if(!this.options.pid){
				let data = {
					avatar:this.userData.avatar,
					born:this.userData.times+' 00:00:00',
					name:this.userData.enterpriseName,
					sex:this.userData.genders == '公' ? 1 : 0,
					typeId: this.userData.cascadeId,
					sign:this.userData.sign
				}
				this.$request(this.commonApi.petAdd,'POST',data,'application/json').then(res=>{
					console.log(res)
					let items = res.data
					if (items.code !== 200) {
						uni.showToast({
							title: items.msg,
							icon: 'none'
						})
					} else {
						uni.showToast({
							title: '添加成功',
							icon: 'none',
							duration: 1500,
							success: () => {
								setTimeout(() => {
									uni.reLaunch({
										url: '../myPet/myPet'
									})
								}, 1000)
							}
						})
					}
				})
			}else{
				let data = {
					avatar:this.userData.avatar,
					born:this.userData.times+' 00:00:00',
					pid:this.options.pid,
					name:this.userData.enterpriseName,
					sex:this.userData.genders == '公' ? 1 : 0,
					typeId: this.userData.cascadeId,
					sign:this.userData.sign
				}
				this.$request(this.commonApi.petUpdate,'POST',data,'application/json').then(res=>{
					let items = res.data
					if (items.code !== 200) {
						uni.showToast({
							title: items.msg,
							icon: 'none'
						})
					} else {
						uni.showToast({
							title: '修改成功',
							icon: 'none',
							duration: 1500,
							success: () => {
								setTimeout(() => {
									uni.navigateBack({
										delta: 1
									})
								}, 1000)
							}
						})
					}
				})
			}
		},
		setUrl(){
			uni.navigateTo({
				url:'../cascade/cascade?userData='+JSON.stringify(this.userData)
			})
		},
		confirm(e){
			this.userData.genders = e[0].label
		},
		getTime(e){
			this.userData.times = e.result
		},
		chooseImage(){
			// uni.chooseImage({
			// 	count:1,//限制最大上传图片数量
			// 	sizeType: ['original', 'compressed'],//图片压缩还是原图
			// 	success: (res) => {
			// 	//图片选择成功的回调
			// 	//res中返回一个图片本地的临时地址
			// 		this.userData.avatar = res.tempFilePaths[0]
			// 	}
			// })
			uni.chooseImage({
				count:1,
			    success: (chooseImageRes) => {
					this.userData.avatar = chooseImageRes.tempFilePaths[0]
			        const tempFilePaths = chooseImageRes.tempFilePaths;
			        uni.uploadFile({
			        	url: this.commonApi.petAvatar,
			        	filePath: tempFilePaths[0],
			        	header: {
			        		token: uni.getStorageSync('token')
			        	},
			        	name: 'file',
			        	formData: {
			        		fileName: tempFilePaths[0]
			        	},
			        	success: res => {
			        		let img = JSON.parse(res.data);
			        		this.userData.avatar = img.data;
			        	},
			        	fail: res => {
			        	}
			        });
			    }
			});
		}
	},
	onLoad(option) {
		if(option.pid){
			this.options.pid = option.pid
			this.$request(this.commonApi.petId+option.pid,'GET',{}).then(res=>{
				let data = res.data.data
				this.userData.avatar = data.avatar
				this.userData.enterpriseName = data.name
				this.userData.times = data.born
				this.userData.cascade = data.typeName
				this.userData.genders = data.sex == 1?'公':'母'
				this.userData.cascadeId = data.typeId
				this.userData.pid = data.pid
				this.userData.sign = data.sign
			})
		}
		if(option.userData){
			let data = JSON.parse(option.userData)
			this.userData = data
		}
		
	}
};
</script>

<style lang="scss" scoped>
	.styleCss{
		width: 660rpx;
	}
	.button /deep/ .u-size-default{
		border-color: #FFCC00;
		background-color: #FFCC00;
	}
	.button{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		bottom: 0;
		left: 0;
		background: white;
		padding: 60rpx 0;
		z-index: 1;
		
	}
	.table-nik-item2{
		width: 100%;
		height: 300rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		border-bottom: 2rpx solid #f2f2f2;
		color: #A0A0A0;
		font-size: 30rpx;
		view:nth-of-type(1){
			width: 100%;
			height: 100rpx;
			display: flex;
			align-items: center;
		}
		textarea{
			width: 100%;
			height: 200rpx;
			background: #f2f2f2;
			border-radius: 15rpx;
			padding: 15rpx;
		}
	}
	.table-nik-item{
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		border-bottom: 2rpx solid #f2f2f2;
		color: #A0A0A0;
		font-size: 30rpx;
		view:nth-of-type(1){
			width: 30%;
			height: 100%;
			display: flex;
			align-items: center;
		}
		view:nth-of-type(2){
			width: 70%;
			height: 100%;
			display: flex;
			align-items: center;
			flex-direction: row-reverse;
		}
	}
	.table-nik{
		width: 700rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	.table{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.topImg-nik1{
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%;
		background: #F5F5F5;
		position: absolute;
		top: 25rpx;
	}
	.topImg-nik{
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: url(../../../static/img/addpet.png) no-repeat center center;
		background-size: 100% 100%;
		position: absolute;
		top: 25rpx;
		overflow: hidden;
		border-radius: 50%;
		image{
			width: 100%;
			height: 100%;
			// border-radius: 50%;
			// zoom: 1;
		}
	}
	.topImg{
		width: 100%;
		height: 260rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}
.content {
	width: 100%;
	display: flex;
	flex-direction: column;
}
</style>
